<template>
    <!--行提供 gutter 属性来指定列之间的间距，其默认值为0。  row 是行   col 是 列 ,span 是大小 ,offset 偏置 -->
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/overview' }">
            <h3>首页</h3>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
            <h3>Docker</h3>
        </el-breadcrumb-item>
    </el-breadcrumb>


    <el-card class="box-card">
        <el-row :gutter="2">
            <el-col :span="4">
                <div class="grid-content " style="text-align: center; vertical-align:middle ; margin: 13px">
                    <span class="ml-3 w-35 text-gray-600 inline-flex items-center " style="margin: 20px ">Command
                        命令</span>
                </div>
            </el-col>

            <el-col :span="12">
                <div class="grid-content " style="margin: 5px">
                    <el-input id="cmd_id" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }
                    " v-model="input" placeholder="command命令"></el-input>
                </div>

            </el-col>

            <el-col :span="4">
                <div class="grid-content " style="float: right ;margin: 5px">
                    <el-button size="large" @click="stardocker">执行Command</el-button>
                </div>
            </el-col>

        </el-row>


        <el-row>

            <el-col :span="18" :offset="2">
                <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="com" label="Command命令" />
                    <el-table-column prop="name" label="解释" width="380" />

                </el-table>
            </el-col>

        </el-row>

        <el-divider />

        <el-row>
            <el-col :span="20" :offset="2">
                <div class="grid-content  info-item" style="border: 1px">
                    <li v-for="item in items.message">
                    {{item}}
                    </li>
                </div>
            </el-col>
        </el-row>

<!-- 
        <el-table  border style="width: 100%">
            <el-table-column prop="REPOSITORY" label="REPOSITORY" width="180" />
            <el-table-column prop="TAG" label="TAG" width="180" />
            <el-table-column prop="IMAGE ID " label="IMAGE ID " />
            <el-table-column prop="CREATED " label="CREATED" />
            <el-table-column prop="SIZE" label="SIZE" />
        </el-table> -->

    </el-card>
</template>


<script setup>

import { ref, reactive } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'     //图标
import { mysubprocess } from '../../../api/workers'

const input = ref("");

const tableData = [
    {
        com: "docker ps ",
        name: '查询当前运行中的容器 '
    },
    {
        com: " docker stop 容器name/容器id",
        name: '停止当前运行中的容器 '
    },
    {
        com: "docker start 容器name/容器id",
        name: '启动docker '
    },
    {
        com: "docker images ",
        name: '本地所有的镜像 '
    },
    {
        com: "docker run -itd --name redis-lastes -p 6382:6382 redis ",
        name: '-p 6379:6379 端口映射：前表示主机部分，：后表示容器部分。\n' +
            '\n' +
            '--name myredis  指定该容器名称，查看和进行操作都比较方便。\n' +
            '\n' +
            '-v 挂载目录，规则与端口映射相同。\n' +
            '\n' +
            '为什么需要挂载目录：个人认为docker是个沙箱隔离级别的容器，这个是它的特点及安全机制，不能随便访问外部（主机）资源目录，所以需要这个挂载目录机制。\n' +
            '\n' +
            '-d redis 表示后台启动redis\n' +
            '\n' +
            'redis-server /etc/redis/redis.conf  以配置文件启动redis，加载容器内的conf文件，最终找到的是挂载的目录/usr/local/docker/redis.conf\n'

    },
    {
        com: "docker logs 容器name/容器id ",
        name: '日志文件 '
    },
    {
        com: "docker run -itd --name redis-lastes -p 6382:6382 redis ",
        name: 'redis docker 启动 '
    },
    {
        com: 'docker rm $(docker ps -qf status=exited)',
        name: "删除状态是退出的容器"
    }

]
const items = reactive({
    message: "",
    code: ""
    
})

// const resData = ref([])
// const resData1 = reactive({
//     REPOSITORY: "",
//     TAG: "",IMAGE_ID: "", 
//     CREATED: "",
//      SIZE: ""


// })

// 启动线程查询
function stardocker() {
    console.log('console input :', input.value);
    var inputjson = {
        inputstr: input.value
    };
    console.log("inputjson:", inputjson);
    if (inputjson) {
        mysubprocess(inputjson).then(response => {
            console.log(response['data']["code"]);
            console.log(response['data']["msg"]);

            console.log("res-->", response);
            items.code = response['data']["code"];
            items.message = response['data']["msg"];

            
            // 填充表格 
            // resData = response.data.msg


        })
    } else {
        console.log('input value is null')
    }


}


</script>

<style lang="less" scoped>
.box-card {
    height: 100%;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}

.info-item {
    font-family: sans-serif;
    border: 1px solid #eee;
    border-radius: 2px;
    padding: 20px 30px;
    margin-top: 1em;
    margin-bottom: 40px;
    user-select: none;
    overflow-x: auto;
}
</style>